<template>
	<view class="control">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		<view class="header flex-align">
			<view class="image">
				<!-- <u--image width="100%" height="100%" src="https://cdn.uviewui.com/uview/album/1.jpg"
					shape="circle"></u--image> -->
				<u-avatar :src="coach.coach_avatar" shape="circle" :size="63"></u-avatar>
				<!-- <image mode="aspectFit" class="small"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f723fb9dc8e7722b040c99c7ad82c36be4d3fdf7.png"> -->
				</image>
				<!-- <image mode="widthFix" class="small" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e8f99238470a999ece429d7c0688169eadd3326d.png"></image> -->
				<!-- <image mode="widthFix" class="small" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/277f15cd5e4ea646bad7bed5aad0dbe695baab78.png"></image> -->
			</view>
			<view class="detail">
				<view class="head-1 flex-align">
					<view class="name">{{coach.full_name}}</view>
					<!-- <view class="name-2">衡阳奥星</view> -->
				</view>
				<view class="head-2 flex-align">
					<u-tag v-if="coach.sex == 1" text="男" borderColor="#e5f0ff" bgColor="#e5f0ff" color="#016DFF"
						size="mini"> </u-tag>
					<u-tag v-if="coach.sex == 2" text="女" borderColor="#e5f0ff" bgColor="#e5f0ff" color="#ff0000"
						size="mini"> </u-tag>
					<u-tag :text="'教学等级：' + coach.level_type_name" size="mini"></u-tag>
					<!-- <u-tag text="教练组" size="mini"></u-tag>
					<u-tag text="全职组" size="mini"></u-tag> -->
				</view>
				<view class="head-3 flex-align">
					工作{{coach.teach_age || ''}}年<view></view>{{coach.name || ''}}
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="main">
			<view class="con">
				<view class="tab-con">
					<view class="info-item">
						<view class="title flex-align">
							<text>基本资料</text>
						</view>
						<view class="basic-list">
							<view class="basic-item flex-align">
								出生日期：{{coach.birthday || ''}}
							</view>
							<view class="basic-item flex-align">
								手机号：{{coach.phone_num}}
							</view>
							<view class="basic-item flex-align">
								工作岗位：{{coach.coach_type_name}}
							</view>
							<view class="basic-item flex-align">
								工作地址：{{coach.venue_name}}
							</view>
							<!-- <view class="basic-item flex-align">
								工号：20130305143
							</view>
							<view class="basic-item flex-align">
								员工卡：20130305143
							</view>
							<view class="basic-item flex-align">
								内码：20130305143
							</view>
							<view class="basic-item flex-align">
								入职时间：2013/12/15
							</view> -->
						</view>
					</view>
					<view class="info-item">
						<view class="title flex-align">
							<text>等级证书</text>
						</view>
						<u-album maxCount="4" :urls="urls2" :rowCount="4"></u-album>
					</view>
					<view class="info-item">
						<view class="title flex-align">
							<text>教练简介</text>
						</view>
						<view class="basic-list strong">
							<view class="basic-item flex-align" style=" flex-wrap: wrap;">
								{{coach.content}}
							</view>
						</view>
					</view>
					<!-- <view class="info-item">
						<view class="title flex-align">
							<text>教学经历</text>
						</view>
						<view class="basic-list strong">
							<view class="basic-item flex-align">
								2016.01-2019.06：国家体育馆游戏教练
							</view>
							<view class="basic-item flex-align">
								2016.01-2019.06：国家体育馆游戏教练
							</view>
						</view>
					</view> -->
					<!-- <view class="info-item">
						<view class="title flex-align">
							<text>个人荣耀</text>
						</view>
						<view class="basic-list strong">
							<view class="basic-item flex-align">
								2015-2017年上海拥有竞标冠军
							</view>
							<view class="basic-item flex-align">
								2015-2017年上海拥有竞标冠军
							</view>
							<view class="basic-item flex-align">
								2015-2017年上海拥有竞标冠军
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	export default {
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '教练信息',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				tabList: [{
						name: '在授课程'
					},
					{
						name: '教练介绍'
					}
				],
				tabActive: 0,
				urls2: [],
				coach:{}
			}
		},
		components: {
			QSNavbar
		},
		onLoad(options) {
			const selectionArrer = JSON.parse(decodeURIComponent(options.selectionArr))
			this.coach = selectionArrer
			console.log(selectionArrer,'selectionArrer')
			this.urls2 = selectionArrer.cert_img.split(',')
		// this.getCoachInfoById()
		},
		methods: {
			async getCoachInfoById() {
				let data = {
					id: this.id,
				};
				let result = await index.getCoachInfoById(data);
				if (result.code == 1) {
					this.coach = result.data
				}
			},
			changeTab(data) {
				this.tabActive = data.index
			}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		min-height: 100vh;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8400abb877da5033244752b3d0e1be87fc7e0f41.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: white;
		display: flex;
		flex-direction: column;

		.header {
			padding: 0px 30rpx;
			box-sizing: border-box;
			width: 100%;

			.image {
				width: 130rpx;
				height: 130rpx;
				position: relative;
				border-radius: 50%;
				border: 2px solid rgb(254, 254, 252);

				/deep/>view {
					height: 100%;
				}

				.small {
					position: absolute;
					width: 100%;
					height: 50rpx;
					bottom: -25rpx;
					left: 0;
				}
			}

			.detail {
				margin-left: 26rpx;

				.head-1 {
					margin-bottom: 10rpx;
					align-items: flex-end;

					.name {
						color: rgb(255, 255, 255);
						font-size: 40rpx;
						font-weight: 700;
						white-space: nowrap;
					}

					.name-2 {
						margin-left: 21rpx;
						color: rgb(255, 255, 255);
						font-size: 26rpx;
						font-weight: 700;
						white-space: nowrap;
						transform: translateY(-7rpx);
					}
				}

				.head-2 {
					/deep/ .u-tag {
						margin-right: 10rpx !important;
						height: 35rpx;
					}
				}

				.head-3 {
					margin-top: 20rpx;
					color: rgb(255, 255, 255);
					font-size: 25rpx;
					font-weight: 700;
					white-space: nowrap;

					view {
						margin: 0px 9rpx;
						background-color: rgb(255, 255, 255);
						width: 1rpx;
						height: 24rpx;
					}
				}
			}
		}

		.main {
			margin-top: 40rpx;
			height: 0;
			flex: 1;
			display: flex;
			flex-direction: column;
			// border-radius: 40rpx 40rpx 0px 0px;
			background-color: rgb(255, 255, 255);

			/deep/ .u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.con {
				border-top: solid 6rpx rgb(239, 239, 239);
				padding: 0px 30rpx;
				padding-bottom: 30rpx;
				min-height: 400rpx;
				box-sizing: border-box;
				overflow: auto;
				flex: 1;

				.tab-con {
					.goods-item {
						height: 220rpx;
						margin-top: 30rpx;

						.image {
							width: 200rpx;
							height: 100%;
							border-radius: 15rpx;
							overflow: hidden;
							position: relative;

							/deep/ .u-transition {
								width: 100%;
								height: 100%;
							}

							.image-info {
								position: absolute;
								bottom: 0;
								width: 100%;
								left: 0;
								font-size: 24rpx;
								text-align: center;
								color: white;
								padding: 10rpx 0;
								background-color: rgba(0, 0, 0, 0.5);
							}

							.tag {
								position: absolute;
								top: 0;
								left: 0;
								font-size: 23rpx;
								color: white;
								padding: 7rpx 15rpx;
								border-radius: 0px 0px 15rpx 0px;
								background-image: linear-gradient(to right, #ffa091, #ff184c);
							}
						}

						.detail {
							flex: 1;
							width: 0;
							height: 100%;
							display: flex;
							flex-direction: column;
							margin-left: 30rpx;
							justify-content: space-between;

							.title {
								font-size: 28rpx;
								margin-bottom: 10rpx;
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.tag {
								font-size: 22rpx;
								background-color: #f4f3f4;
								border-radius: 8rpx;
								padding: 5rpx 10rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}

							.detail-2 {
								color: #a3a3a3;
								font-size: 23rpx;

								image {
									width: 25rpx;
									height: 30rpx;
									margin-right: 10rpx;
								}
							}

							.price {
								color: #ff6a42;

								text {
									font-weight: 700;
									font-size: 37rpx;
								}
							}

							.info {
								color: #a3a3a3;
								font-size: 23rpx;
								margin-left: 15rpx;
								transform: translateY(4rpx);
							}
						}
					}

					.info-item {
						padding-top: 30rpx;
						margin-top: 10rpx;
						background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c809443631a7a14ecc1530b9dcad6725d03d875b.png");
						background-repeat: no-repeat;
						background-size: 50rpx auto;
						background-position: 60rpx 10rpx;

						.title {
							margin-bottom: 20rpx;
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							font-weight: 700;
							// transform: translateX(70rpx);
						}

						.basic-list {
							.basic-item {
								color: rgb(102, 102, 102);
								font-size: 26rpx;
								font-weight: 500;
								// white-space: nowrap;
								margin-bottom: 20rpx;

								&::before {
									content: '';
									display: block;
									width: 16rpx;
									height: 16rpx;
									border-radius: 50%;
									margin-right: 31rpx;
									background-color: #5c93fb;
								}
							}
						}

						/deep/ .u-album__row__wrapper {
							width: 25%;
							margin-right: 0 !important;
							overflow: hidden;
							border-radius: 10rpx;

							&:last-of-type {
								width: auto;
							}
						}

						.strong .basic-item {
							font-weight: 700 !important;
							color: rgb(136, 136, 136);
						}
					}
				}
			}
		}
	}
</style>